<template>
  <div class="boxContent">
    <div class="d_h_slot">
      <div class="head">{{$t("home.workData")}}</div>
      <div class="content">
        <div class="choose">
          <div class="labal d_h_col">{{$t("home.chooseWork")}}</div>
          <div class="select d_h_col">
            <el-select v-model="cpBookId" @change="selectedBook" :placeholder="$t('home.pleaseSelect')">
              <el-option
                v-for="item in bookoptions"
                :key="item.value"
                :label="item.bookTitle"
                :value="item.bookId"
              >
              </el-option>
            </el-select>
          </div>
          <div class="confirm d_h_col">
            <el-button size="small" @click="searchBook" type="primary">{{$t("home.view")}}</el-button>
          </div>
        </div>
        <div class="databox">
          <div class="left">
            <h5>{{$t("home.collectionTotal")}}{{ source.totalCollectNum }}</h5>
            <p>{{$t("home.newCollectionYesterday")}}{{source.yesterdayAddCollectNum }}</p>
          </div>
          <div class="right">
            <h5>{{$t("home.totalSubscriptions")}}{{ source.totalSubNum }}</h5>
            <p>
              <span>{{$t("home.newSubscriptionsYesterday")}}&nbsp;{{ source.yesterdayAddSubNum }}</span>
              <span>{{$t("home.chapterTopSubscription")}}&nbsp;{{ source.chapterMaxSubNum }}</span>
              <span>{{$t("home.chapterAveragesubscription")}}&nbsp;{{ source.chapterAvgSubNum }}</span>
            </p>
          </div>
        </div>
        <div class="cont">
          <div class="tip">
            <div class="labal">
              <div class="d_h_col" style="margin: 5px 20px">{{$t("home.SubscribeDetail")}}</div>
              <el-select v-model="selectDtail" @change="selectDetailFn" :placeholder="$t('home.pleaseSelect')">
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="d_h_col">{{$t("home.total")}}{{totalNum}}{{$t("home.data")}}</div>
          </div>
          <div>
            <el-table
              :data="tableData.rows"
              border
              header-row-class-name="lip_tip"
              style="width: 100%"
            >
              <el-table-column prop="chapterName" :label="$t('home.chapter')" width="180">
              </el-table-column>
              <el-table-column prop="wordCount" :label="$t('home.words')" width="180">
              </el-table-column>
              <el-table-column prop="createTime" :label="$t('home.pubdate')" width="180">
              </el-table-column>
              <el-table-column prop="totalSubNum" :label="$t('home.totalSubscriptions')">
              </el-table-column>
            </el-table>
             <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageMess.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.total">
    </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  selectBookList,
  getCollectNumAndSubNum,
  selectChapterSubList
} from "@/api/authorCenter/createBook";
export default {
  name: "dashboard",
  data() {
    return {
      totalNum:'',
	source:{},
      tableData: [
	  ],
      currentPage: 5,
      selectDtail: 0,
      cpBookId: "",
      bookoptions: [],
	  pageMess:{
		  bookId:'',
		  pageNum:1,
		  pageSize:10,
		  sort:0, //排序字段 0 按章节id排序 , 1 按订阅量排序
	  },
      options: [
        { value: 0, label: this.$t('home.sortByChapterOrder') },
        { value: 1, label: this.$t('home.sortByNumberOfReads') },
      ],
    };
  },
  methods: {
	  //查看
	  searchBook(){
		 this.getCollectNumAndSubNumFn(this.cpBookId)
		 this.selectChapterSubListFn(this.pageMess)
	  },
	  //订阅明细筛选
	  selectDetailFn(res){
		  this.pageMess.sort=res
		  this.selectChapterSubListFn(this.pageMess)
	  },
	  selectedBook(res){//选中作品
		// this.selectClass = res
		this.pageMess.bookId = res
	  },
    handleSizeChange(val) {
    },
    handleCurrentChange(val) {
    },
    getlist() {
      //默认页面数据获取
      selectBookList().then((res) => {
        this.bookoptions = res.source;
		this.cpBookId = this.bookoptions[0].bookId
		this.getCollectNumAndSubNumFn(this.cpBookId)
		this.pageMess.bookId = this.bookoptions[0].bookId
		this.selectChapterSubListFn(this.pageMess)
      });
    },
    getCollectNumAndSubNumFn(id) {
      //获取收藏与订阅
	  let params = {bookId:id}
      getCollectNumAndSubNum(params).then((res) => {
		  this.source = res.source
		  this.pageMess.pageNum = res.source.current
	  });
    },
	selectChapterSubListFn(params){//查询书籍章节订阅列表
		selectChapterSubList(params).then(res=>{
			this.tableData = res.source
      this.totalNum = res.source.rows.length
		})
	}
  },
  mounted(){
	this.getlist();
  }
};
</script>

<style scoped="scoped" lang="scss">
.el-pagination{
  text-align: right;
}
::v-deep .el-table{
  margin-bottom: 20px;
}
::v-deep  .select .el-input__inner{
  height: 48px;
  border-radius: 8px;
}
::v-deep .el-button{
  height: 48px;
  width: 90px;
  border-radius: 8px;
  font-size: 18px;
}
.boxContent{
  padding-top: 20px;
}
.lip_tip {
  text-align: center;
  background: #21d4cf;
  color: #333333;
}
.content {
  .choose {
    display: flex;
    flex-direction: row;
    margin: 15px 0;
    margin-bottom: 35px;
    .labal {
      margin: 5px 20px;
    }
    .select {
      flex: 1;
    }
    .confirm {
      margin-left: 25px;
    }
  }
  .databox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    h5 {
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
      margin-bottom: 20px;
    }
    p {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 22px;
    }
    .left {
      text-align: center;
      box-sizing: border-box;
      width: 322px;
      height: 118px;
      border-radius: 4px;
      // border: 1px solid #e9e9e9;
      padding: 20px 0;
      background:#f5f5f5;
    }
    .right {
      box-sizing: border-box;
      width: 520px;
      height: 118px;
      border-radius: 4px;
      padding: 20px 0;
      text-align: center;
      background:#f5f5f5;
      p {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
    }
  }
  .cont {
    .tip {
      display: flex;
      flex-direction: row;
      margin: 15px 0;
      justify-content: space-between;
      .labal {
        display: flex;
        flex-direction: row;
      }
      .lip_tip {
        text-align: center;
        background: #21d4cf;
        color: #333333;
      }
    }
  }
}
</style>
